<template>
  <view class="course_video_container" v-if="content">
    <view v-if="topBar.style ==='custom'" :style="{paddingTop: topBar.statusBarHeight+'px', backgroundColor:'#000'}"/>
    <view class="video_container">
      <video id="myVideo"
             style="width: 750rpx;height: 420rpx; position: absolute"
             :title="content.title"
             @timeupdate="onTimeupdate"
             @fullscreenchange="onFullscreenchange"
             :src="content.url">
        <cover-image v-if="playState == 0" :src="content.coverUrl" mode="aspectFill" class="bj" @click="play"/>
        <cover-image v-if="playState == 0" src="@/static/course/top_mask.png" mode="widthFix" class="mask"/>
        <cover-image v-if="playState == 0" src="@/static/course/icon_play.png" mode="widthFix" class="play"
                     @click="play"/>
        <cover-image src="@/static/course/icon_back_white.png" mode="widthFix" class="arrow" v-if="!fullScreen"
                     @click="toBack"/>
        <cover-view v-if="!kemuVIP && playState == 0 && content.free == 0" class="try_see" @click="goSubscribe">
          <cover-view>可试看30秒，开通会员免费观看</cover-view>
          <cover-image src="https://down.qwdata.vip/app_icon/1700472391814" mode="widthFix" class="huiyuan"/>
        </cover-view>
        <cover-view v-else-if="!kemuVIP && playState == 0 && content.free == -1" class="try_see"
                    @click="goSubscribe">
          <cover-view>开通会员免费观看</cover-view>
          <cover-image src="https://down.qwdata.vip/app_icon/1700472391814" mode="widthFix" class="huiyuan"/>
        </cover-view>
        <cover-image v-if="playState == 2" src="https://down.qwdata.vip/app_icon/icon_bj.png" mode="widthFix"
                     class="bj"/>
        <cover-view v-if="playState == 2" class="see_end">
          试看结束，开通会员可观看全部视频
        </cover-view>
        <cover-view v-if="playState == 2" class="re_see" @click="play">重新观看</cover-view>
        <cover-view v-if="playState == 2 " class="open_vip" @click="goSubscribe">
          开通会员
        </cover-view>
      </video>
    </view>
    <!--    <view class="body-container" v-if="content.tags.length">-->
    <!--      <view class="main-label">相关考点</view>-->
    <!--      <view class="tags_container">-->
    <!--        <view :class="['tag_container', tagId===tag.tagId?'active':'']" v-for="tag in content.tags">-->
    <!--          {{ tag.title }}-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="body-container">
      <scroll-view class="body" :scroll-y="true">
        <view class="info">
          <view class="title">{{ content.title }}</view>
          <view class="desc" v-if="content.desc">{{ content.desc || '' }}</view>
        </view>
        <view class="main-label">学习列表</view>
        <view class="videos-container">
          <view class="video-container" v-for="(item, n) in contents" :key="item.id" @click="toSelect(item.id)">
            <image class="cover" :src="item.coverUrl"></image>
            <text :class="['label', selectContentId === item.id?'active': '']">{{ n + 1 }}. {{ item.title }}</text>
            <view class="vip">{{ freeFormat(item.free) }}</view>
          </view>
        </view>
        <view style="height: 200rpx"></view>
      </scroll-view>
    </view>
    <view class="button center" v-if="!kemuVIP" @click="goSubscribe">开通会员解锁全部视频</view>
  </view>
</template>

<script>
import {courseApi} from "../../api";
import navbar from '@/components/navbar'
import {mapGetters} from 'vuex'

export default {
  components: {
    navbar
  },
  computed: {
    ...mapGetters(['topBar', 'isKemu2VIP', 'isKemu3VIP']),
    content() {
      // console.log("hsf","===========playState=======:" + this.playState)
      return this.contents.find(item => item.id === this.selectContentId)
    },
    kemuVIP() {
      if (this.course) {
        if (this.course.kemu === 2) {
          return this.isKemu2VIP
        }
        if (this.course.kemu === 3) {
          return this.isKemu3VIP
        }
      }
    }
  },
  watch: {
    playState(newVal) {
      console.log('playState', newVal)
    }
  },
  data() {
    return {
      fullScreen: false,
      questionId: null,
      selectContentId: null,
      contents: [],
      course: null,
      tagId: null,
      playState: 0, //0:初始状态；1.播放中；2：试看结束
    }
  },
  async onLoad({courseId, contentId = 0, index = 0, tagId = null, questionId = null}) {
    this.tagId = tagId
    this.questionId = questionId
    if (tagId) {
      const res = await courseApi.contentsByTag(courseId, tagId)
      this.contents = res.data.data.list
    } else if (questionId) {
      const res = await courseApi.contentsByQuestion(courseId, questionId)
      this.contents = res.data.data.list
    } else {
      const res = await courseApi.info(courseId)
      this.contents = res.data.data.contents
      this.course = res.data.data
    }
    if (contentId) {
      this.selectContentId = parseInt(contentId)
    } else {
      this.selectContentId = this.contents[index].id
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('myVideo')
    // this.videoContext.play()
  },
  methods: {
    onFullscreenchange(e) {
      console.log('onFullscreenchange', e.detail.fullScreen, e.detail.direction)
      this.fullScreen = e.detail.fullScreen
    },
    freeFormat(free) {
      console.log('freeFormat', free)
      return {
        1: '免费',
        0: '试看',
        '-1': 'VIP'
      }[free]
    },
    onTimeupdate(e) {
      console.log('onTimeupdate', 'currentTime:' + e.detail.currentTime)
      if (!this.kemuVIP && this.content.free !== 1 && e.detail.currentTime > 30) {
        this.videoContext.pause()
        this.videoContext.seek(0)
        this.playState = 2;
        // console.log(this.videoContext.stop)
      }
    },
    play() {
      if (this.kemuVIP || this.content.free !== -1) {
        this.playState = 1;
        this.videoContext.play()
      } else {
        uni.showToast({
          icon: 'none',
          title: '请开通会员进行观看',
          duration: 1000
        })
      }
    },
    toSelect(id) {
      this.videoContext.stop()
      this.videoContext.seek(0)
      this.playState = 0;
      this.selectContentId = id
      if (this.kemuVIP || this.content.free === 1) {
        setTimeout(() => {
          this.play()
        }, 500)
      }
    },
    toBack() {
      uni.navigateBack()
    },
    goSubscribe() {
      uni.navigateTo({
        url: '/pages/vip/vip'
      })
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.course_video_container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .video_container {
    width: 750rpx;
    height: 420rpx;

    .mask {
      position: absolute;
      top: -10upx;
      width: 750upx;
      height: 156upx;
    }

    .bj {
      position: absolute;
      width: 750upx;
      height: 420upx;
    }

    .play {
      position: absolute;
      top: 157upx;
      left: 322upx;
      width: 106upx;
      height: 106upx;
    }

    .arrow {
      z-index: 1;
      left: 30upx;
      top: 22upx;
      position: fixed;
      width: 20upx;
      height: 36upx;
    }

    .try_see {
      position: absolute;
      border-radius: 100rpx;
      background-color: #000;
      font-size: 14px;
      color: #FFE7BB;
      left: -70rpx;
      padding: 15rpx 30rpx;
      padding-left: 100rpx;
      display: flex;
      align-items: center;
      bottom: 44rpx;
    }

    .huiyuan {
      width: 30upx;
      height: 26upx;
      margin-left: 20rpx;
    }

    .see_end {
      top: 150rpx;
      font-size: 28upx;
      color: #FFE7BB;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
    }

    .re_see {
      position: absolute;
      left: 120upx;
      bottom: 120upx;
      width: 232upx;
      height: 68upx;
      background-color: #DCDCDC;
      border-radius: 34upx;
      font-size: 15px;
      color: #151A1C;
      text-align: center;
      line-height: 68rpx;
    }

    .open_vip {
      position: absolute;
      right: 120upx;
      bottom: 120upx;
      width: 232upx;
      height: 68upx;
      background-color: #FFE7BB;
      text-align: center;
      line-height: 68rpx;
      border-radius: 34upx;
      font-size: 15px;
      color: #151A1C;
    }
  }

  .vip_tip {
    border-radius: 30upx;
    background-color: #000;
    //opacity: 0.5;
    padding: 10upx 25upx;

    .image {
      margin-right: 10upx;
      width: 30upx;
      height: 26upx;
    }

    .title_n {
      font-size: 24upx;
      color: #fff;
    }

    .title_s {
      font-size: 24upx;
      color: #FFE7BB;
    }
  }

  .tags_container {
    display: flex;

    .tag_container {
      border: 1px solid #0D94FF;
      background-color: rgb(234, 248, 250);
      color: #0D94FF;
      border-radius: 100rpx;
      padding: 10rpx 25rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;

      &.active {
        background-color: #0D94FF;
        color: #fff;
      }
    }
  }

  .info {
    padding: 42rpx 36rpx 0 36rpx;

    .title {
      font-size: 18px;
      color: #000;
    }

    .desc {
      font-size: 14px;
      color: #666666;
      line-height: 24px;
      margin-top: 16rpx;
    }
  }

  .body-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .body {
      overflow: hidden;
      flex: 1;
    }

    .main-label {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-left: 36rpx;
      margin-bottom: 30rpx;
      margin-top: 30rpx;
    }

    .videos-container {
      display: flex;
      flex-wrap: wrap;
      margin-left: 6rpx;

      .video-container {
        width: 324rpx;
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        margin-bottom: 30rpx;
        position: relative;

        .cover {
          width: 324rpx;
          height: 216rpx;
          border-radius: 15rpx;
        }

        .label {
          margin-top: 30rpx;
          font-size: 15px;
          color: #000;

          &.active {
            color: #0D94FF;
          }
        }

        .vip {
          position: absolute;
          background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
          color: #FFE7BB;
          right: 10rpx;
          top: 10rpx;
          font-size: 12px;
          padding: 8rpx 20rpx;
          border-radius: 10rpx;
        }
      }
    }
  }


  .button {
    position: fixed;
    box-shadow: 0 2px 10px #00000040;
    height: 108upx;
    left: 36rpx;
    right: 36rpx;
    bottom: 40rpx;
    background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
    border-radius: 54upx;
    font-weight: bold;
    font-size: 16px;
    color: #FFE7BB;
  }
}
</style>
